<template>
  <div class="group2">
    <!-- !渲染父组件传递过来的请求数据slist -->
    <div class="grid-box">
      <template v-for="item in props.slist" :key="item.id">
        <slot name="gridBoxItem" :item></slot>
      </template>
    </div>
    <hr>

    <!-- !渲染父组件传递过来的chide响应式变量 -->
    <p>这是我的父组件给我的吃的{{ props.chide }}</p>
    <hr>

    <!-- !传值给孙组件 -->
    <SonSonDemo1 :chide2="props.chide"></SonSonDemo1>
  </div>
</template>

<script lang="ts" setup>
import { watchEffect } from 'vue';
import { type IDdemoList } from '@/service/types/StuDemo45Types';
import SonSonDemo1 from './SonSonDemo1.vue'
//接受的父组件传值过来的slist 和 chide
const props = defineProps<{
  slist: IDdemoList[];
  chide: string;
}>();

//监听请求的数据变化可以看到请求过程
watchEffect(() => {
  console.log(props.slist);
});
</script>

<style lang="scss">
.group2 {
  border: 2px solid rgb(111, 203, 50);
  margin: 10px;
  padding: 10px;
}

/* #region  网格布局 */

.grid-box {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.grid-box-item {
  border-radius: 5px;
  cursor: pointer;
}
</style>
